<template>
  <div class="personal-center">
    <van-nav-bar title="个人中心" />
    <div class="header-bg">
      <div class="header-info">
        <van-image round width="70" height="70" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <div class="header-user">
          <div class="user-name">七尾Sam</div>
          <div class="user-phone">169****0456</div>
        </div>
        <van-badge :content="5" class="msg-badge">
          <van-icon name="chat-o" size="24" />
        </van-badge>
      </div>
    </div>
    <div class="quick-actions">
      <div class="action-item">
        <van-image round width="40" height="40" src="" @click="goToPatientList" />
        <div class="action-label">就诊人管理</div>
      </div>
      <div class="action-item" @click="goToSatisfactionSurvey">
        <van-image round width="40" height="40" src="" />
        <div class="action-label">满意度调研</div>
      </div>
    </div>
    <van-cell-group inset>
      <van-cell v-for="item in list" :key="item.text" :title="item.text" is-link>
        <template #icon>
          <van-image round width="32" height="32" src="" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const list = ref([
  { text: '预约挂号记录' },
  { text: '门诊缴费记录' },
  { text: '门诊充值记录' },
  { text: '住院充值记录' },
  { text: '核酸预约记录' },
  { text: '体检预约记录' },
  { text: '病案申请邮寄记录' },
  { text: '问题反馈' },
])

// 跳转到患者列表页面
const goToPatientList = () => {
  router.push('/patient-list');
};

// 跳转到满意度调研页面
const goToSatisfactionSurvey = () => {
  router.push('/questionnaire-list');
};
</script>

<style scoped>
.personal-center {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 20px;
}

.header-bg {
  background: #3478f6;
  height: 160px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  position: relative;
}

.header-info {
  display: flex;
  align-items: center;
  padding: 32px 20px 0 20px;
  position: relative;
}

.header-user {
  margin-left: 16px;
  color: #fff;
}

.user-name {
  font-size: 20px;
  font-weight: bold;
}

.user-phone {
  font-size: 14px;
  opacity: 0.8;
}

.msg-badge {
  position: absolute;
  right: 20px;
  top: 36px;
}

.quick-actions {
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-radius: 12px;
  margin: -30px 16px 16px 16px;
  box-shadow: 0 2px 8px rgba(52, 120, 246, 0.08);
  padding: 16px 0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.action-label {
  margin-top: 8px;
  font-size: 14px;
  color: #3478f6;
}
</style>